<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>提交数据分析</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="icon" th:href="@{/resources/favicon.ico}">
    <link rel="icon" th:href="@{/resources/favicon.ico}">
    <link rel="stylesheet" th:href="@{/resources/layui/css/layui.css}" media="all"/>
    <link rel="stylesheet" th:href="@{/resources/css/public.css}" media="all"/>
</head>
<body style="height: 100%; margin: 0">
<!-- 搜索条件开始 -->
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>查询条件</legend>
</fieldset>
<form class="layui-form" method="post" id="searchFrm">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label" style="display: inline-block;width: 150px">选择月份【档案提交】</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" id="month" readonly="readonly">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label" style="display: inline-block;width: 150px">选择月份【档案更新】</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" id="month2" readonly="readonly">
            </div>
        </div>
        <div class="layui-inline">
            <button type="button" class="layui-btn" id="doSearch">查询</button>
        </div>
    </div>
</form>
<!-- 搜索条件结束 -->

<!-- 柱形图开始 -->
<div style="display: block;width: 100%">
    <div id="container" style="display:inline-block;height: 500px;width:500px"></div>
    <div id="container2" style="display:inline-block;height: 500px;width:500px;margin-left: 50px"></div>
</div>
<!-- 柱形图结束 -->

<script type="text/javascript" th:src="@{/resources/layui/layui.js}"></script>
<script type="text/javascript" th:src="@{/resources/echarts.min.js}"></script>
<script type="text/javascript" th:src="@{/resources/jquery-3.1.1.min.js}"></script>
<script type="text/javascript">
    layui.use([ 'jquery', 'layer', 'form', 'table','laydate'], function() {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;
        var laydate=layui.laydate;
        laydate.render({
            elem:'#month',
            type:'month',
            value:new Date()//以现在年份设置默认值
        });
        laydate.render({
            elem:'#month2',
            type:'month',
            value:new Date()//以现在年份设置默认值
        });
        $("#doSearch").click(function(){
            getData();
            getData2();
        });

        function getData(){
            var month=$("#month").val();
            if(month===""){
                month=new Date().getMonth();
            }
            $.get("/customer/loadCreate",{month:month},function(data){
                var dom = document.getElementById("container");
                var myChart = echarts.init(dom);
                var app = {};
                option = null;
                app.title = '坐标轴刻度与标签对齐';

                option = {
                    title : {
                        text: '客户档案月提交数',
                        x:'center'
                    },
                    color: ['#3398DB'],
                    tooltip : {
                        trigger: 'axis',
                        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis : [
                        {
                            type : 'category',
                            data : data.name,
                            axisTick: {
                                alignWithLabel: true
                            }
                        }
                    ],
                    yAxis : [
                        {
                            type : 'value'
                        }
                    ],
                    series : [
                        {
                            name:'提交档案数',
                            type:'bar',
                            barWidth: '60%',
                            data:data.value
                        }
                    ]
                };
                ;
                if (option && typeof option === "object") {
                    myChart.setOption(option, true);
                }
            });
        }
        function getData2(){
            var month=$("#month2").val();
            if(month===""){
                month=new Date().getMonth();
            }
            $.get("/customer/loadUpdate",{month:month},function(data){
                var dom = document.getElementById("container2");
                var myChart = echarts.init(dom);
                var app = {};
                option = null;
                app.title = '坐标轴刻度与标签对齐';

                option = {
                    title : {
                        text: '客户档案月更新数',
                        x:'center'
                    },
                    color: ['#3398DB'],
                    tooltip : {
                        trigger: 'axis',
                        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis : [
                        {
                            type : 'category',
                            data : data.name,
                            axisTick: {
                                alignWithLabel: true
                            }
                        }
                    ],
                    yAxis : [
                        {
                            type : 'value'
                        }
                    ],
                    series : [
                        {
                            name:'更新档案数',
                            type:'bar',
                            barWidth: '60%',
                            data:data.value
                        }
                    ]
                };
                ;
                if (option && typeof option === "object") {
                    myChart.setOption(option, true);
                }
            });
        }
        $(function(){
            getData();
            getData2();
        })
    });
</script>
<!-- 柱形图结束 -->

</body>
</html>
